<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>#{bundle.cusper}</title>
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" /> 
    </h:head>
    <h:body>
        <ui:composition>
            <h:form enctype="multipart/form-data">
            <script type="text/javascript">  
                function handleSaveCusper(xhr, status, args) {  
                    if(args.validationFailed || !args.success) {  
                        jQuery('#dialog').effect("shake", { times:3 }, 100);  
                    } else {  
                        dlgCusper.hide();  
                    }  
                }
                
                function handleDeleteCusper(xhr, status, args) {  
                    if(args.validationFailed || !args.success) {  
                        jQuery('#dialog').effect("shake", { times:3 }, 100);  
                    } else {  
                        dlgConfirmation.hide();  
                    }  
                }
                
                function textOnKeyPress(e) {
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if(code==13) {
                        cmdSearchCusper.jq.click();
                        e.returnValue=false;
                        e.cancel =true;
                        e.preventDefault();
                    }
                }
                
            </script>  

            <p:toolbar>
                <p:toolbarGroup align="left">
                    <p:commandButton value="#{bundle.btnNew}" image="ui-icon-document"
                                     action="#{cusperBean.newData()}"  
                                     oncomplete="dlgCusper.show()" rendered="#{menuBean.cekButtonAccess(1,'INS;')}"
                                     update=":#{utilityBean.findClientId('displayCusper')}" process="@this">
                            <pe:resetEditableValues for="displayCusper"/>
                        </p:commandButton>

                    <p:commandButton value="#{bundle.btnOpen}" oncomplete="dlgCusper.show()"
                                     image="ui-icon-disk" action="#{cusperBean.openData()}" rendered="#{menuBean.cekButtonAccess(1,'OPN;')}"
                                     update=":#{utilityBean.findClientId('displayCusper')}" > 
                    </p:commandButton>

                    <p:commandButton type="button" value="#{bundle.btnDelete}" image="ui-icon-trash"
                                     onclick="dlgConfirmation.show()" rendered="#{menuBean.cekButtonAccess(1,'DEL;')}"
                                      update=":#{utilityBean.findClientId('displayCusper')}"/> 
                     <p:commandButton value="Refresh" icon="ui-icon-arrowrefresh-1-w" update=":#{utilityBean.findClientId('dtCuspers')}" 
                                         actionListener="#{cusperBean.loadCuspers()}" >
                            
                        </p:commandButton>
                    	    <p:commandButton value="#{bundle.btnSearch}" icon="ui-icon-search" 
                                         onclick="dlgSearchCusper.show()"/> 
                    <p:commandButton type="push" action="#{rptDataCustomerBean.execute()}" value="#{bundle.btnPrint}"  
                                     ajax="false" image="ui-icon-print" rendered="#{menuBean.cekButtonAccess(1,'PRN;')}" 
                                     />
                </p:toolbarGroup>
            </p:toolbar>
                <p:contextMenu for="dtCuspers">  
                    <p:menuitem  ajax="false" action="#{rptDataPerRekeningBean.execute(cusperBean.selectedData.customerId)}" value="#{bundle.btnPrint} Data Per Rekening" icon="ui-icon-print" />  

                </p:contextMenu>  
            <p:dataTable id="dtCuspers" var="cusper" value="#{cusperBean.cuspers}"
                     rowKey="#{cusper.customerId}" 
                     selection="#{cusperBean.selectedData}" selectionMode="single"
                     resizableColumns="true" paginator="true" rows="10" paginatorPosition="bottom"                     
                     rowsPerPageTemplate="5,10,15,30" rowIndexVar="noUrut" draggableColumns="true"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
                 <p:column style="width: 15px">
                    <f:facet name="header">No.</f:facet>
                    <h:outputText value="#{noUrut+1}" />
                 </p:column>
                <p:column style="width: 100px" sortBy="#{cusper.customer.cif}">
                    <f:facet name="header">#{bundle.cif}</f:facet>
                    <h:outputText value="#{cusper.customer.cif}" />
                </p:column>

                <p:column style="width: 200px" sortBy="#{cusper.customer.customerName}">
                    <f:facet name="header">#{bundle.globalName}</f:facet>
                    <h:outputText value="#{cusper.customer.customerName}" />
                </p:column>
                <p:column style="width: 150px" sortBy="#{cusper.customer.aliasName}" >
                    <f:facet name="header">#{bundle.aliasName}</f:facet>
                    <h:outputText value="#{cusper.customer.aliasName}" />
                </p:column>
                <p:column style="width: 300px" sortBy="#{cusper.addressLine1}">
                    <f:facet name="header">#{bundle.addressId}</f:facet>
                    <h:outputText value="#{cusper.customer.idAddressLine1}" />
                </p:column>
                <p:column style="width: 100px" sortBy="#{cusper.customer.idcardNo}">
                    <f:facet name="header">#{bundle.idcardno}</f:facet>
                    <h:outputText value="#{cusper.customer.idcardNo}" />
                </p:column>
                <p:column style="width: 100px" sortBy="#{cusper.birthDate}">
                    <f:facet name="header">#{bundle.birthDate}</f:facet>
                    <h:outputText value="#{cusper.birthDate}" />
                </p:column>
                <p:column style="width: 100px" sortBy="#{cusper.sex}">
                    <f:facet name="header">#{bundle.sex}</f:facet>
                     <!--<h:outputText value="{cusper.sex=='F' ? bundle.sexFemale: bundle.sexMale}" />-->
                     <h:outputText value="#{cusperBean.prepareSex(cusper.sex)}" />
                    
                </p:column>
            </p:dataTable>        

            <p:confirmDialog message="#{bundle.confirmDelete}" appendToBody="true" 
                             header="#{bundle.confirmDeleteHeader}" severity="alert" widgetVar="dlgConfirmation">  
                <p:commandButton value="#{bundle.btnYes}" update="dtCuspers" 
                                 oncomplete="handleDeleteCusper(xhr, status, args)"  
                                 actionListener="#{cusperBean.delete()}" />  
                <p:commandButton value="#{bundle.btnCancel}" onclick="dlgConfirmation.hide()" type="button" />   
            </p:confirmDialog> 
          
                
			
            </h:form>
            
            
            <p:dialog header="#{bundle.btnSearch}" widgetVar="dlgSearchCusper" closable="true" dynamic="true" modal="true" appendToBody="true">
                <h:form>
                <h:panelGrid columns="3" styleClass="addELIT">
                    <h:outputLabel style="padding: 0 15px 0 0" value="#{bundle.globalName}" /><h:outputLabel value= ":" />
                    <p:inputText  onkeyup="upperCase(this)" size="25" value="#{cusperBean.filter.customer.customerName}" ><f:ajax event="change" /></p:inputText>
                    <h:outputLabel value= "#{bundle.birthDate}" /><h:outputLabel value= ":" />
                    <p:calendar pattern="dd/MM/yyyy" size="8" value="#{cusperBean.filter.birthDate}" showOn="button" ><f:ajax event="change" /></p:calendar> 
                    <h:outputLabel  onkeyup="upperCase(this)" style="padding: 0 15px 0 0" value="#{bundle.idcardno}" /><h:outputLabel value= ":" />
                    <p:inputText  size="25" value="#{cusperBean.filter.customer.idcardNo}" ><f:ajax event="change" /></p:inputText>
                    <h:outputLabel  onkeyup="upperCase(this)" style="padding: 0 15px 0 0" value="#{bundle.maidenName}" /><h:outputLabel value= ":" />
                    <p:inputText  size="25" value="#{cusperBean.filter.maidenName}"><f:ajax event="change" /></p:inputText>
		</h:panelGrid> 
                <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR">
                    <f:facet name="footer">  
                        <p:commandButton value="#{bundle.btnSearch}" icon="ui-icon-search" actionListener="#{cusperBean.search()}"
                                         partialSubmit="false"     process="@this"   update=":#{utilityBean.findClientId('dtCuspers')}" />  
                        <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgSearchCusper.hide()" icon="ui-icon-document"/>
                    </f:facet>
                </h:panelGrid>
                    </h:form>
            </p:dialog>
            
            <p:dialog header="#{bundle.cusper}" widgetVar="dlgCusper" closable="true" dynamic="true" modal="true" appendToBody="true">
                <p:ajax immediate="true" event="close" listener="#{cusperBean.handleClose}"/>
                <h:form>
                <h:panelGrid id="displayCusper" styleClass="addELIT">
                    <p:tabView activeIndex="0" rendered="#{cusperBean.insertedData!=null}">
                        <p:tab title="#{bundle.globalInfo}">
                            <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                <h:outputText value= "#{bundle.cif}"/><h:outputLabel value= ":" />
                                <p:inputText value="#{cusperBean.insertedData.customer.cif}" onkeyup="upperCase(this)"
                                                 style="width: 150px;" required="true" requiredMessage="#{bundle.cif} #{bundle.requiredInput}" >
                                    <p:ajax event="blur" listener="#{cusperBean.handleCIFChange}" process="@this"/>
                                </p:inputText>
                                
                                <h:outputText value= "#{bundle.custype}"/><h:outputLabel value= ":" />
                                    <p:selectOneMenu value="#{cusperBean.insertedData.customer.custypeId}" 
                                                     style="width: 200px" required="true" requiredMessage="#{bundle.custype} #{bundle.requiredInput}">
                                        <f:selectItem itemLabel="#{bundle.custypeAnggotaLB}" itemValue="#{constantaBean.custypeAnggotaLb}"/>
                                        <f:selectItem itemLabel="#{bundle.custypeAnggota}" itemValue="#{constantaBean.custypeAnggota}"/>
                                    </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.idcard}"/><h:outputLabel value= ":" />
                                <h:panelGrid columns="2" cellpadding="0" cellspacing="0" width="100%">
                                    <p:selectOneMenu value="#{cusperBean.insertedData.customer.idcardId}" style="width: 150px" required="true" 
                                                     requiredMessage="#{bundle.idcard} #{bundle.requiredInput}" >
                                        <f:selectItem itemLabel="#{bundle.Select} #{bundle.idcard}" itemValue="" />
                                        <f:selectItems value="#{customerBean.availableIdCard}" />
                                    </p:selectOneMenu>
                                                                        
                                    <h:panelGrid columns="2" cellpadding="0" cellspacing="0" style="float:right;" >
                                        <h:outputLabel style="text-align:right;padding: 0 15px 0 0;" value= "#{bundle.idcardno} :" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.idcardNo}" style="float: right;" required="true" 
                                                     requiredMessage="#{bundle.idcardno} #{bundle.requiredInput}" onkeyup="upperCase(this)"/> 
                                    </h:panelGrid>
                                </h:panelGrid>    

                                <h:outputLabel value= "#{bundle.globalName}"/><h:outputLabel value= ":" />
                                <p:inputText value="#{cusperBean.insertedData.customer.customerName}" onkeyup="upperCase(this)"
                                                 style="width: 450px;" required="true" requiredMessage="#{bundle.globalName} #{bundle.requiredInput}" />
                                
                                <h:outputLabel value= "#{bundle.aliasName}"/><h:outputLabel value= ":" />
                                <p:inputText value="#{cusperBean.insertedData.customer.aliasName}" style="width: 450px;" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= "#{bundle.phone}"/><h:outputLabel value= ":" />
                                <h:panelGrid columns="2" cellpadding="0" cellspacing="0" width="100%">
                                    <p:inputText value="#{cusperBean.insertedData.customer.phone}" style="margin-right: 20px" onkeyup="upperCase(this)"/>
                                    <h:panelGrid columns="2" cellspacing="0" cellpadding="0" style="float:right;">
                                        <h:outputLabel style="text-align: left;padding: 0 15px 0 0;" value= "#{bundle.mobilePhone} :" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.mobilePhone}" style="float: right;" onkeyup="upperCase(this)"/>
                                    </h:panelGrid>
                                </h:panelGrid>

                                <h:outputLabel value= "#{bundle.email}"/><h:outputLabel value= ":" />
                                <h:panelGrid columns="3" cellpadding="0" cellspacing="0" width="100%">
                                    <p:inputText value="#{cusperBean.insertedData.customer.email}" size="40" onkeyup="upperCase(this)"/>                                    
                                    <h:panelGrid columns="2" cellpadding="0" cellspacing="0" style="float:right;">
                                        <h:outputLabel style="text-align: left;padding: 0 15px 0 0;" value= "#{bundle.fax} :" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.fax}" style="float: right;" onkeyup="upperCase(this)"/>
                                    </h:panelGrid>
                                </h:panelGrid>
                                
                                <h:outputLabel value= "#{bundle.npwp}"/><h:outputLabel value= ":" />
                                <h:panelGrid columns="3" cellpadding="0" cellspacing="0" width="100%">
                                    <p:inputText value="#{cusperBean.insertedData.customer.npwp}" onkeyup="upperCase(this)"/>
                                    <!-- <h:panelGrid columns="2" cellpadding="0" cellspacing="0" style="float:right;">
                                        <h:outputLabel style="text-align: left;padding: 0 15px 0 0;" value= "#{bundle.pin} :" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.pin}" style="float: right;" />
                                    </h:panelGrid>    -->
                                </h:panelGrid>

                               <!-- <h:outputLabel value= "#{bundle.fingerprint}"/><h:outputLabel value= ":" />
                                <p:inputText value="#{cusperBean.insertedData.customer.fingerPrint}" style="width: 450px;"/> -->
                            </h:panelGrid>
                        </p:tab>

                        <p:tab title="#{bundle.adress}">
                            <h:panelGrid columns="3" cellpadding="1" columnClasses="panelGridId">
                                <p:panel header="#{bundle.addressId}" >
                                    <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                        <h:outputLabel value= "#{bundle.adress}" /><h:outputLabel value= ":" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.idAddressLine1}" onkeyup="upperCase(this)"
                                                     style="width: 230px;" required="true" requiredMessage="#{bundle.adress} #{bundle.requiredInput}" />
                                        
                                        <h:outputLabel value= " " /><h:outputLabel value= ":" />
                                        <p:inputText style="width: 230px;" value="#{cusperBean.insertedData.customer.idAddressLine2}" onkeyup="upperCase(this)"/>
                                        
                                        <h:outputLabel value= " " /><h:outputLabel value= ":" />
                                        <p:inputText style="width: 230px;" value="#{cusperBean.insertedData.customer.idAddressLine3}" onkeyup="upperCase(this)"/>
                                        
                                        <h:outputLabel value= "#{bundle.country}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu value="#{cusperBean.insertedData.customer.idCountryId}" 
                                                         style="width: 150px;" required="false" requiredMessage="#{bundle.country} #{bundle.requiredInput}" >
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.country}"  itemValue="-1"/>
                                            <f:selectItems value="#{customerBean.availableCountry}" var="country" />
                                            <p:ajax update="cmbProvince1a" listener="#{cusperBean.handleCountryChange(cusperBean.insertedData.customer.idCountryId)}" />
                                        </p:selectOneMenu>

                                        <h:outputLabel value= "#{bundle.province}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu id="cmbProvince1a" value="#{cusperBean.insertedData.customer.idProvinceId}" 
                                                             style="width: 150px;" required="false" requiredMessage="#{bundle.province} #{bundle.requiredInput}" >
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.province}" itemValue="-1" />
                                            <f:selectItems value="#{cusperBean.availableProvince}" var="province" />
                                            <p:ajax update="cmbDistrict1a" listener="#{cusperBean.handleProvinceChange(cusperBean.insertedData.customer.idProvinceId)}" />
                                        </p:selectOneMenu>

                                        <h:outputLabel value= "#{bundle.district}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu id="cmbDistrict1a" value="#{cusperBean.insertedData.customer.idDistrictId}" 
                                                         style="width: 150px;" required="false" requiredMessage="#{bundle.district} #{bundle.requiredInput}" >
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.district}" itemValue="-1" />
                                            <f:selectItems value="#{cusperBean.availableDistrict}" var="district" />
                                        </p:selectOneMenu>

                                        <h:outputLabel value= "#{bundle.subdistrict}" /><h:outputLabel value= ":" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.idSubdistrict}" required="false" onkeyup="upperCase(this)"
                                                style="width: 230px;" requiredMessage="#{bundle.subdistrict} #{bundle.requiredInput}" />            
                                           
                                        <h:outputLabel value= "#{bundle.village}" /><h:outputLabel value= ":" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.idVillage}" required="false" onkeyup="upperCase(this)"
                                                     style="width: 230px;" requiredMessage="#{bundle.subdistrict} #{bundle.requiredInput}" />

                                        <h:outputLabel value= "#{bundle.postcode}" /><h:outputLabel value= ":" />
                                        <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
                                            <p:inputText value="#{cusperBean.insertedData.customer.idPostcode}" maxlength="5" style="margin-right: 15px; width: 50px;" onkeyup="upperCase(this)"/>
                                            <h:panelGrid columns="4">
                                                <h:outputLabel style="padding:0 5px 0 0;" value= "#{bundle.rt} :" />
                                                <p:inputText value="#{cusperBean.insertedData.customer.idRt}" style="margin-right: 15px; width: 25px;" onkeyup="upperCase(this)"/>
                                                <h:outputLabel style="padding:0 5px 0 0;" value= "#{bundle.rw} :" />
                                                <p:inputText value="#{cusperBean.insertedData.customer.idRw}" style="margin-right: 15px; width: 25px;" onkeyup="upperCase(this)"/>
                                            </h:panelGrid>
                                        </h:panelGrid>
                                    </h:panelGrid>
                                </p:panel>

                                <p:panel header="#{bundle.addressRes}">
                                    <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                        <h:outputLabel value= "#{bundle.restatus}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu value="#{cusperBean.insertedData.customer.restatusId}" 
                                                         style="width: 150px" required="false" requiredMessage="#{bundle.restatus} #{bundle.requiredInput}" >
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.restatus}" itemValue="-1" />
                                            <f:selectItems value="#{customerBean.availableRestatus}"/>
                                        </p:selectOneMenu>

                                        <h:outputLabel value= "#{bundle.adress}" /><h:outputLabel value= ":" />
                                        <p:inputText style="width: 230px;" value="#{cusperBean.insertedData.customer.resAddressLine1}" onkeyup="upperCase(this)"/>
                                        
                                        <h:outputLabel value= " " /><h:outputLabel value= ":" />
                                        <p:inputText style="width: 230px;" value="#{cusperBean.insertedData.customer.resAddressLine2}" onkeyup="upperCase(this)"/>

                                        <h:outputLabel value= " " /><h:outputLabel value= ":" />
                                        <p:inputText style="width: 230px;" value="#{cusperBean.insertedData.customer.resAddressLine3}" onkeyup="upperCase(this)"/>
                                        
                                        <h:outputLabel value= "#{bundle.country}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu value="#{cusperBean.insertedData.customer.resCountryId}"
                                                         style="width: 150px" required="false" requiredMessage="#{bundle.country} #{bundle.requiredInput}">
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.country}"  />
                                            <f:selectItems value="#{customerBean.availableCountry}" />
                                            <p:ajax update="cmbProvince2a"  listener="#{cusperBean.handleRescountryChange(cusperBean.insertedData.customer.resCountryId)}" />
                                        </p:selectOneMenu>

                                        <h:outputLabel value= "#{bundle.province}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu id="cmbProvince2a" value="#{cusperBean.insertedData.customer.resProvinceId}" 
                                                             style="width: 150px" required="false" requiredMessage="#{bundle.province} #{bundle.requiredInput}">
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.province}"  />
                                            <f:selectItems value="#{cusperBean.availableProvince}" />
                                            <p:ajax update="cmbDistrict2a"  listener="#{cusperBean.handleResprovinceChange(cusperBean.insertedData.customer.resProvinceId)}" />
                                        </p:selectOneMenu>

                                        <h:outputLabel value= "#{bundle.district}" /><h:outputLabel value= ":" />
                                        <p:selectOneMenu id="cmbDistrict2a" value="#{cusperBean.insertedData.customer.resDistrictId}" 
                                                                 style="width: 150px" required="false" requiredMessage="#{bundle.district} #{bundle.requiredInput}">
                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.district}"  />
                                            <f:selectItems value="#{cusperBean.availableDistrict}" var="district2" />
                                        </p:selectOneMenu>
                                        
                                        <h:outputLabel value= "#{bundle.subdistrict}" /><h:outputLabel value= ":" />
                                        <p:inputText value="#{cusperBean.insertedData.customer.resSubdistrict}" onkeyup="upperCase(this)"/>

                                        <h:outputLabel value= "#{bundle.village}" /><h:outputLabel value= ":" />
                                        <p:inputText style="width: 230px" value="#{cusperBean.insertedData.customer.resVillage}" onkeyup="upperCase(this)"/>                                             

                                        <h:outputLabel value= "#{bundle.postcode}" /><h:outputLabel value= ":" />
                                        <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
                                            <p:inputText value="#{cusperBean.insertedData.customer.resPostcode}" style="margin-right: 15px; width: 50px;" onkeyup="upperCase(this)"/>
                                            <h:panelGrid columns="4">
                                                <h:outputLabel style="padding:0 5px 0 0;" value= "#{bundle.rt} :" />
                                                <p:inputText value="#{cusperBean.insertedData.customer.resRt}" style="margin-right: 15px; width: 25px;" onkeyup="upperCase(this)"/>
                                                <h:outputLabel style="padding:0 5px 0 0;" value= "#{bundle.rw} :" />
                                                <p:inputText value="#{cusperBean.insertedData.customer.resRw}" style="margin-right: 15px; width: 25px;" onkeyup="upperCase(this)"/>
                                            </h:panelGrid>
                                        </h:panelGrid>
                                    </h:panelGrid>    
                                </p:panel>
                            </h:panelGrid>
                        </p:tab>

                        <p:tab title="#{bundle.personalInfo}">
                            <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                             
                                <h:outputLabel value= "#{bundle.birthPlace}" /><h:outputLabel value= ":" />
                                <p:inputText value="#{cusperBean.insertedData.birthPlace}" style="width: 190px" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= "#{bundle.birthDate}" /><h:outputLabel value= ":" />
                                <p:calendar pattern="dd/MM/yyyy" size="8" showOn="button" value="#{cusperBean.insertedData.birthDate}"/> 
                                
                                <h:outputLabel value= "#{bundle.religion}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.religionId}" 
                                                 style="width: 200px" required="true" requiredMessage="#{bundle.religion} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="#{bundle.Select} #{bundle.religion}" itemValue="" />
                                    <f:selectItems value="#{cusperBean.availableReligion}" var="religi" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.education}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.educationId}" 
                                                 style="width: 200px" required="false" requiredMessage="#{bundle.education} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="#{bundle.Select} #{bundle.education}" itemValue="-1" />
                                    <f:selectItems value="#{cusperBean.availableEducation}" var="education" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.nationality}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.nationalityId}" 
                                                 style="width: 200px" required="true" requiredMessage="#{bundle.nationality} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="#{bundle.Select} #{bundle.nationality}" itemValue="" />
                                    <f:selectItems value="#{cusperBean.availableNationality}" var="nationality" />
                                </p:selectOneMenu>

                                <h:outputLabel value= "#{bundle.nationalityRemark}" /><h:outputLabel value= ":" />
                                <p:inputText  value="#{cusperBean.insertedData.nationalityRemark}" style="width: 190px" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= "#{bundle.sex}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.sex}" 
                                                 style="width: 200px" required="true" requiredMessage="#{bundle.sex} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="#{bundle.sexFemale}" itemValue="F"/>
                                    <f:selectItem itemLabel="#{bundle.sexMale}" itemValue="M"/>
                                </p:selectOneMenu>
                                
                                <h:outputLabel value="#{bundle.maidenName}" /><h:outputLabel value= ":" />
                                <p:inputText  value="#{cusperBean.insertedData.maidenName}" style="width: 190px" onkeyup="upperCase(this)"/>

                                <h:outputLabel value= "#{bundle.marstatus}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.marstatusId}" 
                                                 style="width: 200px" required="true" requiredMessage="#{bundle.marstatus} #{bundle.requiredInput}">
                                        <f:selectItem itemLabel="#{bundle.Select} #{bundle.marstatus}" itemValue="" />
                                        <f:selectItems value="#{cusperBean.availableMarstatus}" var="marstatus" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.spouserel}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.spouserelId}" 
                                                 style="width: 200px" required="false" requiredMessage="#{bundle.spouserel} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="#{bundle.Select} #{bundle.spouserel}" itemValue="-1" />
                                        <f:selectItems value="#{cusperBean.availableSpouserel}" var="spouserel" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.spouseName}" /><h:outputLabel value= ":" />
                                <p:inputText  value="#{cusperBean.insertedData.spouseName}" style="width: 190px" onkeyup="upperCase(this)"/>

                            </h:panelGrid>
                        </p:tab>

                        <p:tab title="#{bundle.occupation}">
                            <h:panelGrid columns="3" cellpadding="0" cellspacing="5">        
                                <h:outputLabel style="padding:0 15px 0 0;" value= "#{bundle.companyName}" /><h:outputLabel value= ":" />
                                <p:inputText  value="#{cusperBean.insertedData.companyName}" size="40" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= "#{bundle.adress}" /><h:outputLabel value= ":" />
                                <p:inputText  size="40" value="#{cusperBean.insertedData.addressLine1}" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= " " /><h:outputLabel value= ":" />
                                <p:inputText  size="40" value="#{cusperBean.insertedData.addressLine2}" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= " " /><h:outputLabel value= ":" />
                                <p:inputText  size="40" value="#{cusperBean.insertedData.addressLine3}" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= "#{bundle.officePhone}" /><h:outputLabel value= ":" />
                                <p:inputText  value="#{cusperBean.insertedData.officePhone}" onkeyup="upperCase(this)"/>
                                
                                <h:outputLabel value= "#{bundle.corebus}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.corebusId}" 
                                                 style="width: 200px" required="false" requiredMessage="#{bundle.corebus} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="#{bundle.Select} #{bundle.corebus}" itemValue="-1" />
                                        <f:selectItems value="#{cusperBean.availableCorebus}" var="corebus" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.occupation}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.occupationId}" 
                                                 style="width: 200px" required="true" requiredMessage="#{bundle.occupation} #{bundle.requiredInput}">
                                        <f:selectItem itemLabel="#{bundle.Select} #{bundle.occupation}" itemValue="" />
                                        <f:selectItems value="#{cusperBean.availableOccu}" var="occu" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.incomeamt}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.incomeamtId}" 
                                                 style="width: 200px" required="false" requiredMessage="#{bundle.incomeamt} #{bundle.requiredInput}">
                                        <f:selectItem itemLabel="#{bundle.Select} #{bundle.incomeamt}"  itemValue="-1"/>
                                        <f:selectItems value="#{cusperBean.availableIncomeamt}" var="incomeamt" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.incomesrc}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.incomesrcId}" 
                                                 style="width: 200px" required="false" requiredMessage="#{bundle.incomesrc} #{bundle.requiredInput}">
                                        <f:selectItem itemLabel="#{bundle.Select} #{bundle.incomesrc}"  itemValue="-1"/>
                                        <f:selectItems value="#{cusperBean.availableIncomesrc}" var="incomesrc" />
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.incomestatus}" /><h:outputLabel value= ":" />
                                <p:selectOneMenu value="#{cusperBean.insertedData.relToCompany}" 
                                    style="width: 200px" required="true" requiredMessage="#{bundle.incomestatus} #{bundle.requiredInput}">
                                    <f:selectItem itemLabel="TDK TERKAIT" itemValue="#{bundle.reltoCompanyTdkTerkait}"/>
                                    <f:selectItem itemLabel="TERKAIT" itemValue="#{bundle.reltoCompanyTerkait}"/>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </p:tab>

                        <p:tab title="#{bundle.specimen}">
                            <p:fileUpload rendered="#{cusperBean.insertedData!=null}" mode="advanced"
                                          allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="100000" fileUploadListener="#{cusperBean.handleFileUpload}" update="imgSpecimen">
                            </p:fileUpload>
                            <p:graphicImage  id="imgSpecimen" value="/upload/personal/#{cusperBean.insertedData.customer.specimen}"  rendered="#{cusperBean.insertedData!=null}"/>
                        </p:tab>
                    </p:tabView>
                </h:panelGrid>
                <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR">
                    <f:facet name="footer">
                        <p:commandButton value="#{bundle.btnSave}" image="ui-icon-disk" action="#{cusperBean.trySave()}"
                                         update=":#{utilityBean.findClientId('dtCuspers')}" rendered="#{menuBean.cekButtonAccess(1,'UPD;')}"
                                         oncomplete="handleSaveCusper(xhr, status, args)"/>
                        <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgCusper.hide()" image="ui-icon-document" 
                                         process="@this">
                            <pe:resetEditableValues for="displayCusper"/>
                        </p:commandButton>
                    </f:facet>
                </h:panelGrid>
                </h:form>
            </p:dialog>  

        
        </ui:composition>
    </h:body>
</html>
